<!--
 * @Date: 2022-04-11 14:24:20
 * @Author: 陶子
 * @LastEditTime: 2022-08-25 20:09:24
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\qualityManagement\qualityTask\qualityTaskList.vue
 * @pageName: 这是--(质检任务)--页面
-->
<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" rtitle="..." :actions='[{ text: checkedShow?"取消报工":"批量报工" }]' @clickAction='clickAction' />
    <Search style='padding-top:0.1rem' ref="topSearch" class="search" placeholder="工单编号|生产物料" :isAdd="false" :isScreen="true" :isType="true" @onSearch="onSearch"
      @onScreen="onScreen">
      <div v-if="currentEnvironment=='dingding'" @click="clickAction('批量报工')" slot='rightText' style="margin-left:0.1rem">批量报工</div>
    </Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-checkbox title="任务工序" :key='selecKey' :selectValue='selectValue' :columns="messSingleProcessTaskStaticsDtoList" @comfirm="taskProcessChange">
      </van-dropdown-checkbox>
      <van-dropdown-item @change='dropDownChang' v-model="dropdownObj.reportStatus" :options="reportSelectList" />
      <van-dropdown-item @change='dropDownChang' v-model="dropdownObj.orderStatus" :options="statusList" />
    </van-dropdown-menu>
    <search-tag ref="SearchTag" @getCategory="getCategory">
    </search-tag>
    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment ? 'calc(100vh - 1rem)' : 'calc(100vh - 1.5rem)'}">
      <pageList ref="pageList" :checkedShow="checkedShow" :operationTxt="operationTxt" @handleList="handleList" :columns="columns" :listUrl="listUrl"
        @getCheckedValue="getCheckedValue">
        <div slot="label" slot-scope="{item}" class="labelBox">
          <div class="labelLeft" :style="{color:checkColor(item.orderStatus)}">{{item.orderStatusName}}</div>
          <div class='labelRight' :style="{color:item.reportStatus=='yes'?'#1890ff':'#888888'}">{{item.reportStatusName}}</div>
        </div>
        <div slot="foot" slot-scope="{item}" class="operateBox">
          <div @click.stop='goReport(item)' v-if="item.reportStatus =='yes'">报工</div>
          <div v-if='item.orderStatus == "abolished"'>删除</div>
        </div>
      </pageList>
    </div>
    <!-- dialog弹框 -->
    <van-dialog v-model="showDialog" show-cancel-button confirm-button-color="#1890FF" :showCancelButton='false' confirmButtonText='我知道了'>
      <div slot="title" class="dialogContentBox">
        <van-icon name="warning-o" size="0.20rem" color="#FF943E" /><span style="margin-left: 0.07rem">无法批量报工</span>
      </div>
      <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
        {{dialogMessage}}
      </div>
      <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
    </van-dialog>
  </div>
</template>

<script>
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { processTaskCompletionStatics } from "@/api/mobile";
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      showDialog: false,
      dialogMessage: "",
      checkedShow: false, //列表是否支持选择
      operationTxt: "批量报工", //选择按钮名称
      listUrl: "/mess/messProductOrderTask/list", //列表接口
      columns: {
        titleKey: "goodsName", //标题
        content: [
          //内容
          {
            name: "工单编号",
            key: ["orderCode"],
          },
          {
            name: "工序名称",
            key: ["processName"],
          },
          {
            name: "计划生产",
            key: ["planProductionNum", "reportWorkUnitText"],
          },
          {
            name: "合格品",
            key: ["qualifiedNum", "reportWorkUnitText"],
          },
          {
            name: "不合格品",
            key: ["notQualifiedNum", "reportWorkUnitText"],
          },
        ],
        labelKey: ["orderStatusName", "reportStatusName"], //标签
      },
      keyword: "",
      dropdownObj: {
        processId: "",
        reportStatus: "yes",
        orderStatus: "",
      },
      messSingleProcessTaskStaticsDtoList: [],
      reportSelectList: [
        {
          text: "报工状态",
          value: "",
        },
        {
          text: "可报工",
          value: "yes",
        },
        {
          text: "不可报工",
          value: "no",
        },
      ],
      statusList: [
        {
          text: "生产状态",
          value: "",
        },
        {
          text: "未开始",
          value: "notStarted",
        },
        {
          text: "生产中",
          value: "inProduction",
        },
        {
          text: "已作废",
          value: "abolished",
        },
        {
          text: "已完成",
          value: "completed",
        },
      ],
      selectValue: [],
      selecKey: 1,
      appTitle: "",
      currentEnvironment: "",
    };
  },
  computed: {},
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = this.$route.query.navTitle;
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else if (this.checkedShow) {
      this.checkedShow = false
      next(false);
    } else {
      next();
    }
  },
  created() {
    this.currentEnvironment = localStorage.getItem("currentEnvironment");
    this.appTitle = this.$route.query.navTitle;
    this.getLeftData();
  },
  mounted() {
    let searchObj = {
      ...this.dropdownObj,
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    //列表点击更多按钮事件
    handleList(id, item, type) {
      if (type == "列表") {
        this.$router.push({
          path: "/qualityTask/taskDetail",
          query: {
            taskId: id,
          },
        });
      }
    },
    goReport(item) {
      this.$router.push({
        path: "/qualityTask/report",
        query: {
          taskId: item.id,
          orderId: item.orderId,
        },
      });
    },

    checkColor(orderStatus) {
      let colorStr = "";
      switch (orderStatus) {
        case "notStarted":
          colorStr = "#ff943e";
          break;
        case "inProduction":
          colorStr = "#1890ff";
          break;
        case "completed":
          colorStr = "#00b042";
          break;
        case "abolished":
          colorStr = "#888888";
          break;
      }
      return colorStr;
    },
    getLeftData() {
      let params = {
        type: "quality",
      };
      processTaskCompletionStatics(params).then((res) => {
        if (res.success) {
          let resultList = res.result.messSingleProcessTaskStaticsDtoList;
          this.messSingleProcessTaskStaticsDtoList = [];
          resultList = resultList.filter((item) => {
            return item.processName && item.processName != "全部";
          });
          if (resultList.length > 0) {
            for (let item of resultList) {
              let resultObj = {
                text: item.processName,
                value: item.processId,
              };
              this.messSingleProcessTaskStaticsDtoList.push(resultObj);
            }
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    clickAction(text) {
      if (text == "批量报工") {
        this.checkedShow = true;
      } else {
        this.checkedShow = false;
      }
    },
    taskProcessChange(v) {
      this.selectValue = v.split(",");
      this.selectValue = this.selectValue.filter((item) => item);
      this.dropdownObj.processId = v;
      this.dropDownChang();
    },
    dropDownChang() {
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      pramsObj.keyword = this.keyword;
      this.$refs.SearchTag.showModal(this.keyword, pramsObj);
    },

    getCategory(sureObj) {
      this.appTitle = this.$route.query.navTitle;
      this.selecKey += 1;
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.selectValue = sureObj.processId.split(",");
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      delete this.dropdownObj.keyword;
      this.searchQuery(sureObj);
    },
    // 获取选择的列表数据
    getCheckedValue(ids, selectArr) {
      if (selectArr.length > 0) {
        this.dialogMessage = "";
        let strArr = [];
        for (let item of selectArr) {
          if (item.reportStatus == "no") {
            let str = item.orderCode + "-" + item.processName;
            strArr.push(str);
          }
        }
        if (strArr.length > 0) {
          this.dialogMessage =
            "任务：" + strArr.join("、") + "，状态不对无法报工";
          this.showDialog = true;
        } else {
          this.checkedShow = false
          this.$router.push({
            name: "qualityBatchReport",
            params: {
              selectArr: JSON.stringify(selectArr),
            },
          });
        }
      } else {
        this.$toast("请先选择数据");
      }
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
        type: "quality",
      };
      console.log("这里有啥：", params);
      this.$refs.pageList.searchQuery(params);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.14rem;
  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    margin-right: 0.05rem;
    font-size: 0.11rem;
  }
  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    font-size: 0.11rem;
  }
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.07rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #1890ff;
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 0.1rem 0.19rem;
  color: #191f25;
  font-size: 0.16rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
</style>